<template>
  <base-layout>
    <div class="home-container">
      <!-- 顶部统计卡片 -->
      <a-row :gutter="[24, 24]">
        <a-col :span="6">
          <a-card class="stat-card students-card">
            <div class="stat-content">
              <TeamOutlined class="stat-icon" />
              <div class="stat-info">
                <div class="stat-title">总学生数</div>
                <div class="stat-value">128<span class="stat-unit">人</span></div>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stat-card active-card">
            <div class="stat-content">
              <InteractionOutlined class="stat-icon" />
              <div class="stat-info">
                <div class="stat-title">今日活跃</div>
                <div class="stat-value">85<span class="stat-unit">人</span></div>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stat-card projects-card">
            <div class="stat-content">
              <ProjectOutlined class="stat-icon" />
              <div class="stat-info">
                <div class="stat-title">进行中的项目</div>
                <div class="stat-value">12<span class="stat-unit">个</span></div>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stat-card submissions-card">
            <div class="stat-content">
              <SolutionOutlined class="stat-icon" />
              <div class="stat-info">
                <div class="stat-title">待批改提交</div>
                <div class="stat-value">25<span class="stat-unit">份</span></div>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>

      <!-- 学生活跃度和积分分布 -->
      <a-row :gutter="[24, 24]" style="margin-top: 24px">
        <a-col :span="12">
          <a-card title="活跃度趋势" class="chart-card">
            <v-chart class="chart" :option="activityOption" />
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="积分分布" class="chart-card">
            <v-chart class="chart" :option="pointsOption" />
          </a-card>
        </a-col>
      </a-row>

      <!-- 最近提交和学生排名 -->
      <a-row :gutter="[24, 24]" style="margin-top: 24px; margin-bottom: 24px">
        <a-col :span="12">
          <a-card title="最近提交" class="table-card">
            <a-table :columns="submissionColumns" :data-source="submissionData" :pagination="false">
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'status'">
                  <a-tag :color="getStatusColor(record.status)">{{ record.status }}</a-tag>
                </template>
              </template>
            </a-table>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="学生排名" class="table-card">
            <a-table :columns="rankColumns" :data-source="rankData" :pagination="false">
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'rank'">
                  <span :class="getRankClass(record.rank)">{{ record.rank }}</span>
                </template>
              </template>
            </a-table>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </base-layout>
</template>

<script setup>
import { ref } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import BaseLayout from '@/components/layout/BaseLayout.vue'
import {
  TeamOutlined,
  InteractionOutlined,
  ProjectOutlined,
  SolutionOutlined
} from '@ant-design/icons-vue'

use([
  CanvasRenderer,
  LineChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

// 最近提交数据
const submissionColumns = [
  { title: '时间', dataIndex: 'time', key: 'time', width: 160 },
  { title: '学号', dataIndex: 'studentId', key: 'studentId', width: 100 },
  { title: '姓名', dataIndex: 'name', key: 'name', width: 100 },
  { title: '类型', dataIndex: 'type', key: 'type', width: 100 },
  { title: '状态', dataIndex: 'status', key: 'status', width: 100 }
]

const submissionData = [
  { time: '2024-03-10 15:30', studentId: '2021001', name: '张三', type: '项目报告', status: '待批改' },
  { time: '2024-03-10 15:00', studentId: '2021002', name: '李四', type: 'OJ提交', status: '已通过' },
  { time: '2024-03-10 14:30', studentId: '2021003', name: '王五', type: '博客', status: '待审核' },
  { time: '2024-03-10 14:00', studentId: '2021004', name: '赵六', type: '项目报告', status: '待批改' }
]

// 学生排名数据
const rankColumns = [
  { title: '排名', dataIndex: 'rank', key: 'rank', width: 80 },
  { title: '学号', dataIndex: 'studentId', key: 'studentId', width: 100 },
  { title: '姓名', dataIndex: 'name', key: 'name', width: 100 },
  { title: '总分', dataIndex: 'score', key: 'score', width: 100 },
  { title: '完成率', dataIndex: 'completion', key: 'completion', width: 100 }
]

const rankData = [
  { rank: 1, studentId: '2021001', name: '张三', score: 95, completion: '95%' },
  { rank: 2, studentId: '2021002', name: '李四', score: 92, completion: '92%' },
  { rank: 3, studentId: '2021003', name: '王五', score: 90, completion: '88%' },
  { rank: 4, studentId: '2021004', name: '赵六', score: 88, completion: '85%' },
  { rank: 5, studentId: '2021005', name: '钱七', score: 85, completion: '82%' },
  { rank: 6, studentId: '2021006', name: '孙八', score: 83, completion: '80%' },
  { rank: 7, studentId: '2021007', name: '周九', score: 82, completion: '79%' },
  { rank: 8, studentId: '2021008', name: '吴十', score: 80, completion: '78%' },
  { rank: 9, studentId: '2021009', name: '郑十一', score: 78, completion: '75%' },
  { rank: 10, studentId: '2021010', name: '王十二', score: 77, completion: '74%' },
  { rank: 11, studentId: '2021011', name: '李十三', score: 75, completion: '72%' },
  { rank: 12, studentId: '2021012', name: '张十四', score: 73, completion: '70%' },
  { rank: 13, studentId: '2021013', name: '刘十五', score: 72, completion: '69%' },
  { rank: 14, studentId: '2021014', name: '陈十六', score: 70, completion: '68%' },
  { rank: 15, studentId: '2021015', name: '杨十七', score: 68, completion: '65%' }
]

// 活跃度趋势图配置
const activityOption = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['活跃人数', '提交数量']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '活跃人数',
      type: 'line',
      data: [80, 85, 90, 82, 88, 70, 86],
      smooth: true,
      areaStyle: {}
    },
    {
      name: '提交数量',
      type: 'line',
      data: [120, 132, 145, 125, 138, 95, 122],
      smooth: true,
      areaStyle: {}
    }
  ]
}

// 积分分布图配置
const pointsOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['300+', '200-299', '100-199', '50-99', '0-49']
  },
  yAxis: {
    type: 'value',
    name: '人数'
  },
  series: [
    {
      type: 'bar',
      data: [
        { value: 15, itemStyle: { color: '#722ed1' } },  // 紫色表示最高分段
        { value: 38, itemStyle: { color: '#52c41a' } },  // 绿色表示较高分段
        { value: 45, itemStyle: { color: '#1890ff' } },  // 蓝色表示中等分段
        { value: 22, itemStyle: { color: '#faad14' } },  // 黄色表示较低分段
        { value: 8, itemStyle: { color: '#ff4d4f' } }    // 红色表示最低分段
      ],
      barWidth: '60%'
    }
  ]
}

// 获取状态标签颜色
const getStatusColor = (status) => {
  const colors = {
    '待批改': 'orange',
    '已通过': 'green',
    '待审核': 'blue',
    '未通过': 'red'
  }
  return colors[status] || 'default'
}

// 获取排名样式
const getRankClass = (rank) => {
  return {
    'rank-1': rank === 1,
    'rank-2': rank === 2,
    'rank-3': rank === 3
  }
}
</script>

<style scoped>
/* 基础布局 */
.dashboard {
  padding: 24px;
  background: #f0f2f5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 统一卡片基础样式 */
.base-card {
  background: #fff;
  border-radius: 4px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  height: 100%;
  width: 100%;
}

/* 统计卡片行 */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.stat-card {
  @extend .base-card;
  display: flex;
  align-items: center;
}

/* 图表行 */
.chart-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
  flex: 1;
}

.chart-card {
  @extend .base-card;
  min-height: 400px;
}

.chart {
  height: 320px;
}

/* 表格行 */
.table-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
  flex: 1;
}

.table-card {
  @extend .base-card;
  min-height: 400px;
  :deep(.ant-card-body) {
    padding: 0;
  }
  :deep(.ant-table-wrapper) {
    height: 400px;
  }
  :deep(.ant-table-body) {
    max-height: 320px;
    overflow-y: auto;
  }
}

/* 统计卡片内部样式 */
.stat-content {
  display: flex;
  align-items: center;
  width: 100%;
}

.stat-icon {
  font-size: 36px;
  margin-right: 16px;
  flex-shrink: 0;
}

.stat-info {
  flex: 1;
  min-width: 0;
}

.stat-title {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-value {
  font-size: 20px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-unit {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.45);
  margin-left: 4px;
}

/* 统计卡片渐变背景 */
.students-card {
  background: linear-gradient(135deg, #1890ff11 0%, #1890ff22 100%);
  .stat-icon {
    color: #1890ff;
  }
}

.active-card {
  background: linear-gradient(135deg, #52c41a11 0%, #52c41a22 100%);
  .stat-icon {
    color: #52c41a;
  }
}

.projects-card {
  background: linear-gradient(135deg, #722ed111 0%, #722ed122 100%);
  .stat-icon {
    color: #722ed1;
  }
}

.submissions-card {
  background: linear-gradient(135deg, #fa541c11 0%, #fa541c22 100%);
  .stat-icon {
    color: #fa541c;
  }
}

/* 排名样式 */
.rank-1 {
  color: #f5222d;
  font-weight: bold;
}

.rank-2 {
  color: #fa8c16;
  font-weight: bold;
}

.rank-3 {
  color: #faad14;
  font-weight: bold;
}

/* 图表容器 */
.chart-container {
  height: 300px;
  width: 100%;
}

/* 覆盖 Ant Design 样式 */
:deep(.ant-card) {
  height: 100%;
  display: flex;
  flex-direction: column;
}

:deep(.ant-card-body) {
  flex: 1;
  padding: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

:deep(.ant-table-wrapper) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

:deep(.ant-spin-nested-loading) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

:deep(.ant-spin-container) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

:deep(.ant-table) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

:deep(.ant-table-container) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 其他样式保持不变 */
</style> 